<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
    <link href="plugs/layui/css/layui.css" rel="stylesheet"/>
    <link href="common/css/user.css" rel="stylesheet"/>
    <link href="common/css/common.css" rel="stylesheet"/>
</head>
<body>
<div class="main">
    <div class="header" th:include="include :: header"></div>

    <div class="content">
        <div class="photo">
            <img src="/common/images/photo.png" alt="" id="photo" class="photo-img" onclick="$('#file').click();">
            <input type="file" name="file" id="file" accept="image/jpeg, image/png">
        </div>
        <div class="menu">
            <div class="layui-panel">
                <ul class="layui-menu">
                    <li>
                        <div class="layui-menu-body-title"><a href="javascript:void(0);" onclick="modifyPassword();">修改密码<img src="/common/images/right.png"/></a></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="footer" th:include="include :: footer"></div>
</div>

<script src="common/js/jquery.min.js"></script>
<script src="plugs/layui/layui.js"></script>
<script src="common/js/common.js"></script>
<script>
    $(function () {
        let user = sessionStorage.getItem("currentUser");
        if (user !== ''){
            let photo = JSON.parse(user).photo;
            if (photo !== '' && photo !== undefined && photo !== null){
                $("#photo").attr("src", photo);
            }
        }

        //
        $("#file").on("change", function () {
            let file = document.getElementById("file").files[0];
            let formData = new FormData();
            formData.append("file", file);
            let p = file.name;
            if (!p.toLowerCase().endsWith("png") && !p.toLowerCase().endsWith("jpg")){
                layer.msg("请选择图片作为头像", {icon: 2});
                $("#file").val('');
                return false;
            }
            $.ajax({
                type: 'post',
                url: "/api/savePhoto",
                data: formData,
                cache: false,
                processData: false,
                contentType: false,
            }).success(function (result) {
                $("#photo").attr("src", result.data.photo);
                sessionStorage.setItem("currentUser", JSON.stringify(result.data));
            }).error(function () {
                layer.msg("头像修改失败", {icon: 2});
            });
        })
    })

    /**
     * 修改密码
     */
    function modifyPassword() {
        layer.open({
            closeBtn: 1,
            title:'修改密码',
            btn:['保存', '关闭'],
            // area: ['100%', '30%'],
            btnAlign: 'c',
            content: '' +
                '<form class="layui-form">\n' +
                '  <div class="layui-form-item">\n' +
                // '    <label class="layui-form-label"><font color="red">*</font>密码</label>\n' +
                // '    <div class="layui-input-block">\n' +
                '      <input type="password" name="password" id="password" placeholder="请输入密码" autocomplete="off" class="layui-input">\n' +
                // '    </div>\n' +
                '  </div>' +
                '  <div class="layui-form-item">\n' +
                // '    <label class="layui-form-label"><font color="red">*</font>确认</label>\n' +
                // '    <div class="layui-input-block">\n' +
                '      <input type="password" name="pwd" id="pwd" placeholder="请输入确认密码" autocomplete="off" class="layui-input">\n' +
                // '    </div>\n' +
                '  </div>' +
                '</form>',
            yes: function () {
                savePassword();
            },
            btn2: function (index) {
                layer.close(index);
            }
        })
    }

    /**
     * 保存密码
     * @returns {boolean}
     */
    function savePassword() {
        let password = $("#password").val();
        if (password === ''){
            layer.msg('请输入密码', {icon: 2, time: 1000});
            return false;
        }
        let pwd = $("#pwd").val();
        if (pwd === ''){
            layer.msg('请输入确认密码', {icon: 2, time: 1000});
            return false;
        }
        if (pwd !== password){
            layer.msg('两次密码不一致', {icon: 2, time: 1000});
            return false;
        }

        $.ajax({
            url:'/api/savePassword',
            data: {"password":password},
            type:"post",
            dataType:'json',
            success:function(result){
                console.log(result);
                if (result.code === 200){
                    sessionStorage.removeItem("currentUser");
                    // 设置cookie
                    layer.msg(result.msg, {icon:1, time:1000}, function () {
                        location.href = '/login';
                    });
                }else {
                    layer.msg(result.msg, {icon:2});
                }
            }
        });
    }
</script>
</body>
</html>